<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="/css/main.css"/>
  <link rel="stylesheet" href="/cms/layui/css/layui.css">
  <script src="/js/uikit.js"></script>
</head>

<body>

<header th:fragment="header" id="header" class="uk-background-primary uk-background-norepeat uk-background-cover uk-background-center-center uk-light" style="background-image: url(/img/header.jpg);">
  <nav class="uk-navbar-container">
    <div class="uk-container">
      <div data-uk-navbar>
        <div class="uk-navbar-left">
          <a class="uk-navbar-item uk-logo uk-visible@m" href="/reception/index">在线知识问答</a>
          <a class="uk-navbar-toggle uk-hidden@m" href="#offcanvas-docs" data-uk-toggle><span
                  data-uk-navbar-toggle-icon></span> <span class="uk-margin-small-left">Articles</span></a>
        </div>
        <div class="uk-navbar-center uk-hidden@m">
          <a class="uk-navbar-item uk-logo" href="index.html">在线知识问答</a>
        </div>
        <div class="uk-navbar-right">
          <ul class="uk-navbar-nav uk-visible@m">
            <li class="uk-active"><a href="/reception/index">首页</a></li>
            <li ><a href="/article/all">所有文章</a></li>
            <li ><a href="/download/page">资源下载</a></li>
            <li>
              <a href="#">我的</a>
              <div class="uk-navbar-dropdown">
                <ul class="uk-navbar-dropdown-nav uk-nav-parent-icon" data-uk-nav>
                  <li><a href="/user/profile">个人信息</a></li>
                  <li><a href="/user/request/question">发起提问</a></li>
                  <li><a href="/my/article/">我发布的文章</a></li>
                  <li><a href="/my/download/page">我的资源</a></li>
                  <li><a href="/user/tags">我的文章标签</a></li>
                  <li><a href="/user/logout">登出</a></li>
                </ul>
              </div>
            </li>

            <li>
              <div class="uk-navbar-item">
                <a class="uk-button uk-button-small uk-button-primary-outline" href="contact.html">关于我们</a>
              </div>
            </li>
          </ul>
          <a class="uk-navbar-toggle uk-hidden@m" href="#offcanvas" data-uk-toggle><span
                  data-uk-navbar-toggle-icon></span> <span class="uk-margin-small-left">Menu</span></a>
        </div>
      </div>
    </div>
  </nav>

  <div class="uk-section uk-position-relative uk-position-z-index" data-uk-scrollspy="cls: uk-animation-slide-bottom-medium; repeat: true">
    <div class="uk-container">
      <h1 class="uk-text-center uk-margin-remove-top">在这里您可以提问和搜索！</h1>
      <div class="hero-search uk-margin-medium-top">
        <form class="uk-search uk-search-default uk-width-1-1" name="search-hero" onSubmit="return false;">

          <input style="padding-left: 24px;float: left;border-radius: 5px 0 0 5px; width: 94%" id="searchMsg" class="uk-search-input uk-form-large uk-border-rounded" type="search"
                 placeholder="开始搜索资源" autocomplete="off" data-minchars="1" data-maxitems="30">

          <input style="width: 6%;float:right;border-radius: 0 5px 5px  0 ; cursor: pointer"  id="searchButton" class="uk-search-input uk-form-large uk-border-rounded" type="search"
                 placeholder="" autocomplete="off" data-minchars="1"  value="搜索">

        </form>
      </div>
    </div>
  </div>
</header>


<div class="uk-section uk-section-muted">
  <div class="uk-container">
    <div class="uk-margin-medium-top">

      <div th:each="download:${pageInfo}"
           class="uk-card  uk-card-default uk-card-hover uk-card-body uk-inline uk-border-rounded uk-width-1-1"
           style="border-bottom: 1px dotted #583ABC; border-radius: 0px;">
        <h3 class="uk-card-title uk-margin-remove uk-text-primary" th:text="${download.title}"></h3>
        <p class="uk-margin-small-top" th:text="${download.description}"></p>
        <div class="uk-article-meta uk-flex uk-flex-middle">

          <img class="uk-border-circle uk-avatar-small" style="height: 36px;width: 36px;"
               th:src="'/' + ${download.headImg}" alt="">
          <div style="margin-top: 10px">
            本资源上传于：
            <time class="uk-margin-small-right"
                  th:text="${#dates.format(download.createTime, 'yyyy-MM-dd hh:mm:ss')}"></time>
            <br>
            更新于：
            <time th:text="${#dates.format(download.updateTime, 'yyyy-MM-dd hh:mm:ss')}"></time>

          </div>

          <div class="uk-text-center" style="margin-left: 66%;">
            <input class="uk-button uk-button-primary uk-border-rounded" type="submit" th:onclick="download([[${download.id}]])" value="下载">
          </div>

        </div>
      </div>

    </div>
    <div class="uk-text-center uk-margin-medium-top">

    </div>
  </div>
</div>

<div th:insert="~{common::#footer}"></div>
<script src="/js/awesomplete.js"></script>
<script src="/js/custom.js"></script>
<script src="/js/jquery.min.js"></script>
<script src="/cms/layui/layui.js" charset="utf-8"></script>
<script>
  function download(index) {
    if (!confirm("确认下载？")) {
      return false;
    }
    window.open('/download/file?downloadId='+index)
  }


  document.onkeydown = function(e){
    if(e.keyCode == 13){
      var searchDownload = $("#searchDownload").val();
      if (!searchDownload) {
        alert("请输入搜索内容！");
        return false;
      }

      window.location.href='/download/page?downloadName='+ searchDownload

    }
  }

  $(function () {
    $("#searchButton").click(function () {
      var keyword = $("#searchMsg").val();

      window.location.href = '/download/search?keyword='+keyword;
    })
  })



</script>
</body>

</html>